<template>
  <div class="mapChat" style="width: 100%;height: 100%;">
    <div id="main" style="width: 100%;height:100%;"/>
    <map-model ref="mapChart"/>
    <div class="breadcrumb">
      <div class="province" @click="sdView">山东</div>
      <div v-show="cityStatus" style="margin: 0 5px">&gt;</div>
      <div v-show="cityStatus" class="city">{{ selectCityName }}</div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/utils/mixins/resize'
import MapModel from '@/views/home/model/MapModel'

const SdJson = require('../json/shandong.json')
const provinces = ['370100', '371500', '371400', '371600', '370500', '370300', '370900', '370800', '371700', '370400', '371300', '371100', '370700', '370200', '370600', '3710000']
const provincesText = ['济南市', '聊城市', '德州市', '滨州市', '东营市', '淄博市', '泰安市', '济宁市', '菏泽市', '枣庄市', '临沂市', '日照市', '潍坊市', '青岛市', '烟台市', '威海市']
const provincesName = ['jinan', 'liaocheng', 'dezhou', 'binzhou', 'dongying', 'zibo', 'taian', 'jining', 'heze', 'zaozhuang', 'linyi', 'rizhao', 'weifang', 'qingdao', 'yantai', 'weihai']
export default {
  name: 'MapChat',
  mixins: [resize],
  components: {
    MapModel
  },
  props: {
    mapChatData: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      myChart: '',
      distributionOptions: '',
      cityStatus: false,
      selectCityName: ''
    }
  },
  watch: {
    mapChatData: {
      handler(val) {
        this.$nextTick(() => {
          this.init()
        })
      },
      deep: true
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {
    sdView() {
      this.init()
      this.cityStatus = false
      this.selectCityName = ''
    },
    // 显示各省地图
    getProvinceMapOpt(provinceAlphabet, name) {
      let pathData
      if (provinceAlphabet === 370000) {
        pathData = require('../json/shandong.json')
      }
      pathData = require('../json/' + provinceAlphabet + '.json')
      echarts.registerMap(name, pathData)
      this.changeOptions(name, pathData)
      this.myChart.setOption(this.distributionOptions, true)
      window.onresize = () => {
        this.myChart.resize()
      }
    },
    init() {
      echarts.registerMap('shandong', SdJson)
      this.changeOptions('shandong', SdJson)
      this.myChart = echarts.init(document.getElementById('main'))
      this.myChart.setOption(this.distributionOptions)
      // 上边应该都懂，下面就是创建了一个点击事件，目的是点击省份子区域的时候可以切换到省份地图，省份的json文件自己下载。
      this.myChart.on('click', params => {
        if (params.seriesType === 'custom') {
          this.$refs.mapChart.showModel(params.data)
        } else {
          const code = provinces[provincesText.indexOf(params.name)] || 370000
          this.getProvinceMapOpt(code, provincesName[provincesText.indexOf(params.name)])
          this.cityStatus = true
          this.selectCityName = params.name
        }
      })
      window.onresize = function() {
        this.myChart.resize()
      }
    },
    addImage(url, params, api, realData) {
      return {
        type: 'image',

        style: {
          image: url,
          x: api.coord([
            realData[params.dataIndex].longitude, realData[params.dataIndex]
              .latitude
          ])[0],
          y: api.coord([
            realData[params.dataIndex].longitude, realData[params.dataIndex].latitude
          ])[1],
          width: 20,
          height: 19
        }
      }
    },
    changeOptions(name, data) {
      // 经纬度数据
      const seriesList = this.mapChatData || []
      console.log(seriesList)
      this.distributionOptions = {
        tooltip: { // 提示框组件
          show: true, // 显示提示框组件
          trigger: 'item', // 触发类型
          triggerOn: 'mousemove', // 出发条件
          backgroundColor: 'rgba(0,0,0,0)',
          formatter: function(params) {
            var res = `<div class="tooltip">
                          <div class="tooltipTitle fw">${params.data.enterpriseName || ''}</div>
                          <div class="tooltipInfo">
                            <div class="items">
                               <div>站点</div>
                               <div>${params.data.subname || ''}</div>
                            </div>
                            <div class="items">
                              <div>行业</div>
                              <div>${params.data.industryCode || ''}</div>
                            </div>
                          </div>
                        </div>`
            return res
          }
        },
        series: [{
          type: 'custom', // 配置显示方式为用户自定义
          coordinateSystem: 'geo',
          renderItem: (params, api) => {
            if (!seriesList.length) {
              return false
            }
            // 具体实现自定义图标的方法
            if (seriesList[params.dataIndex].warnInfo == '0') {
              return this.addImage(require('../../../assets/images/screen/map1.png'), params, api, seriesList)
            } else if (seriesList[params.dataIndex].warnInfo == '1') {
              return this.addImage(require('../../../assets/images/screen/map2.png'), params, api, seriesList)
            } else {
              return this.addImage(require('../../../assets/images/screen/map3.png'), params, api, seriesList)
            }
          },
          data: seriesList
        }], // 数据
        geo: {

          map: name || 'china', // 引入地图 省份或者 国家
          // layoutCenter: ['50%', '50%'], // 设置后left/right/top/bottom等属性无效
          layoutSize: '45%',
          roam: true, // 开启鼠标缩放和漫
          // center: [seriesList[0].longitude, seriesList[0].latitude],
          zoom: 1,
          regions: [
            {
              name: '南海诸岛',
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0 // 为 0 时不绘制该图形
                }
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ],
          label: {
            normal: {
              // 静态的时候展示样式
              show: true, // 是否显示地图省份得名称
              textStyle: {
                color: '#fff', fontSize: 10, fontFamily: 'Arial'
              }
            },
            emphasis: { // 高亮状态下的样式
              // 动态展示的样式
              color: '#fff'
            }
          },
          itemStyle: { // 地图区域的多边形 图形样式。
            normal: {
              borderColor: '#00D8E8', // 边框颜色
              areaColor: '#0D1669', //  区域颜色
              textStyle: { // 文字颜色
                color: '#fff'
              }
              // shadowBlur: 10, // 图形阴影的模糊大小
              // shadowOffsetX: 10 // 阴影水平方向上的偏移距离。
            },
            emphasis: {
              areaColor: '#1c2f59',
              color: '#fff'
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .tooltip {
  width: 226px;
  height: 109px;
  background: url("../../../assets/images/screen/model.png") no-repeat;
  background-size: 100% 100%;
  color: #000;
  padding: 15px;

  .tooltipTitle {
    padding: 5px 0;
    border-bottom: 1px solid #F39800;
  }

  .tooltipInfo {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: space-between;

    .items {
      width: 50%;

      div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
      }
    }
  }
}

.mapChat {
  position: relative;

  .breadcrumb {
    color: #FFFFFF;
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 90px;
    display: flex;
    justify-content: flex-start;
    position: absolute;
    font-weight: bold;
    top: 30px;
    left: 30px;

    .province {
      cursor: pointer;
    }
  }

}

</style>
